import { SelectField, Flex, IconArrowDropDown } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { SelectFieldDemo, ControlledSelect } from './demo.tsx';
import {
  DefaultSelectFieldExample,
  SelectFieldSizeExample,
  SelectFieldVariationExample,
  SelectFieldPlaceholderExample,
  SelectFieldDescriptiveTextExample,
  SelectFieldIconExample,
  SelectFieldDisabledStateExample,
  SelectFieldValidationErrorExample,
  SelectFieldControlledExample,
  SelectFieldOptionsExample,
  SelectFieldThemeExample,
  SelectFieldStylePropsExample,
} from './examples';

## Demo

<SelectFieldDemo />

## Usage

Import the SelectField primitive, and provide a `label` for accessibility. The `<option>` tags nested inside the component define the available options in the drop-down list.

<Example>
  <DefaultSelectFieldExample />
  
  <ExampleCode>

```jsx file=./examples/DefaultSelectFieldExample.tsx

```

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

### Controlled component

To manually control the SelectField state, you can use the `value` and `onChange` props along with React's `useState` hook.

<Example>
  <SelectFieldControlledExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldControlledExample.tsx

```

  </ExampleCode>
</Example>

### Options

Create a simple `SelectField` by passing a list to the `options` prop.

<Example>
  <SelectFieldOptionsExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldOptionsExample.tsx

```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the SelectField size. Available options are `small`, `large`, and none (default).

<Example>
  <SelectFieldSizeExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldSizeExample.tsx

```

  </ExampleCode>
</Example>

### Variations

There are two variation styles available: default and `quiet`.

<Example>
  <SelectFieldVariationExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldVariationExample.tsx

```

  </ExampleCode>
</Example>

### Placeholder

Text that appears in the form control when it has no value set.

<Example>
  <SelectFieldPlaceholderExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldPlaceholderExample.tsx

```

  </ExampleCode>
</Example>

### Descriptive text

The `descriptiveText` prop will only be visible when `label` is not hidden (i.e., `labelHidden={false}`). You can use it to provide some additional description of the field.

<Example>
  <SelectFieldDescriptiveTextExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldDescriptiveTextExample.tsx

```

  </ExampleCode>
</Example>

### Icon

You can change the icon used to expand the SelectField by using the `icon` prop. You can also change the icon's color by passing the `iconColor` prop.

<Example>
  <SelectFieldIconExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldIconExample.tsx

```

  </ExampleCode>
</Example>

### Disabled state

A disabled field will not be focusable or mutable, and it will not be submitted with form data. Use the `isDisabled` prop to set the state for the SelectField.

<Example>
  <SelectFieldDisabledStateExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldDisabledStateExample.tsx

```

  </ExampleCode>
</Example>

### Validation error

Use the `hasError` and `errorMessage` props to mark a SelectField as having a validation error.

<Example>
  <SelectFieldValidationErrorExample />
  
  <ExampleCode>

```jsx file=./examples/SelectFieldValidationErrorExample.tsx

```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="SelectField" link="select" element="<select>">
  <Example>
    <SelectField label="Fruit" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </SelectField>

    <ExampleCode>

    ```jsx
    <SelectField label="Fruit" name="fruit">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </SelectField>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="SelectField" link="select">
  <Example>
    <SelectFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/SelectFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="SelectField" />

### Global styling

To override styling on all SelectFields, you can set the Amplify CSS variables with the built-in `.amplify-selectfield` class.

<Example>
  <SelectField
    label="Globally styled field"
    className="globally-styled-selectfield"
  />
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-selectfield {
      --amplify-components-fieldcontrol-border-color: rebeccapurple;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific `SelectField`, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <SelectField
    label="Fruit"
    labelHidden={true}
    className="my-custom-selectfield"
    placeholder="Please select a fruit"
  >
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </SelectField>
<ExampleCode>

```css
/* styles.css */
.my-custom-selectfield .amplify-select {
  border-radius: 0;
}
```

</ExampleCode>
</Example>

_Using style props:_

<Example>
  <SelectFieldStylePropsExample />
  
  <ExampleCode>

    ```jsx file=./examples/SelectFieldStylePropsExample.tsx
    ```

  </ExampleCode>

</Example>